<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery height</title>
	<script src="framework/jquery-1.10.2.min.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		.box {
			float: left;
			width:160px;
			padding: 10px 0 0 10px;
			height: auto;
		}

		.pic {
			border: 1px solid #ccc;
			border-radius: 5px;
			box-shadow: 0 0 10px #ccc;
			padding: 10px;
		}
		.pic img {
			width: 100%;
			height: auto;
		}

		#container{
			position: relative;
		}

		#container:after{
			content: '';
			display: block;
			clear: both;
			visibility: hidden;
			position: relative;
		}
	</style>
	<script>
		$(function(){
			var div = "<div class='box'><div class='pic'><img src='images/1.jpg' /></div></div>";
			$("#container").html(div);

			var $boxs = $(".box");
			console.log($boxs.eq(0)[0].clientHeight);
		});
	</script>
</head>
<body>
	<div id="container"></div>
</body>
</html>